<template>
	<div class="main">
		<div class="header">
			<router-link to="/find">
				<span class="mui-icon mui-icon-arrowleft" @click="show"></span>
			</router-link>
			<span>地址管理</span>
			<router-link to="/newadd">
				<span class="mui-icon mui-icon-plus"></span>
			</router-link>
		</div>
		
		<div class="dizhi">
			<!--<div class="dizhi_div">
				<span class="mui-icon mui-icon-paperplane aa"></span>
				<div class="dizhi_div_div">
					<p class="p1">
						<span>刘一手</span><span>12343225435</span>
					</p>
					<p class="p2">
						<span>送至:</span><span>地址</span>
					</p>
				</div>
			</div>-->
			<div class="dizhi_div" v-for="(i,index) in dizhi" @click="btnColor(index)">
				<div :class="showColor(index)">
					<span class="mui-icon mui-icon-paperplane"></span>
				</div>
				<div class="dizhi_div_div">
					<p class="p1">
						<span>{{i.name}}</span><span>{{i.tel}}</span>
					</p>
					<p class="p2">
						<span>送至:</span><span>{{i.addres}}</span>
					</p>
				</div>
			</div>
		</div>
			
		
	</div>
</template>
<style scoped>
	*{
		margin: 0;padding:0;
	}
	.header{
		width: 100%;height: 6rem;background: red;display: flex;justify-content: space-between;
		align-items: center;padding-left: 1rem;padding-right: 1rem;
	}
	.header a:nth-child(1){
		margin-left: 1.5rem;font-size: 2.2rem;color: white;
	}
	.header span:nth-child(2){
		font-size: 1.6rem;color: white;
	}
	.header a:nth-child(3){
		margin-right: 1.5rem;font-size: 1.8rem;color: white;
	}
	.dizhi_div{
		display: flex;align-items: center;background: white;height: 5rem;
	}
	.dizhi_div>.mui-icon{
		color: #555;
	}
	.isColor{
		color:#f00;
	}
	.p1{
		color: black;font-size: 1.6rem;
	}
	.p1 span{
		margin-left: 1.5rem;
	}
	.p2{
		color: #666;font-size: 1.4rem;
	}
	.p2 span{
		margin-left: 1.5rem;
	}
</style>

<script>
	export default {
		name:'Dizgl',
		data () {
			return {
				Arradder:[],
				dizhi:[
				{name:"yhd",tel:"2334234",addres:"尽快哈哈",doornum:"55"}
				],
				isActive:false,
				colorNum:0
			}
		},
		methods:{
			show:function(){
				$("#list").show(); 	
			},
			btnColor:function(index){
				this.colorNum = index;
				console.log(this.dizhi[index]);
				localStorage.bb = JSON.stringify(this.dizhi[index]);
			},
			showColor:function(index){
				return this.colorNum == index ? "isColor":"";
			}
		},
		beforeCreate:function(){
			
		},
		created:function(){
			this.Arradder= JSON.parse(localStorage.obj);
			this.dizhi.push(this.Arradder[0]);
//			console.log(this.dizhi);
		},
		destroyed:function () {
			//console.log('blue页面销毁')
		}
	}
</script>